<template>
  <div class="page-container">
    <div class="content">

      <div class="module-top">
        警情列表
      </div>
      <div class="module-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="transparent-table"
        >
          <el-table-column
            prop="date"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="stutas"
            label="状态">
          </el-table-column>
           <el-table-column
            prop="address"
            label="所属组织"
            width="280">
          </el-table-column>
           <el-table-column
            prop="date"
            label="时间"
            width="180">
          </el-table-column>
           <el-table-column
            prop="name"
            label="操作"
            width="180">
          </el-table-column>
        </el-table>
      </div>
      
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        status: '切图成功',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 20, 40, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  margin-top: 150px;
  width: 100%;
  height: auto;

}
.module-top{
  padding-left: 20px;
  width: 100%;
  height: 38px;
  line-height: 38px;
  color: #ebebeb;
  background-image: url('@/assets/images/instance-top.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.module-box{
  padding: 40px 20px;
  width: 100%;
  height: 860px;
  border-radius: 4px;
  background-image: url('@/assets/images/instance_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 无边框且无默认颜色的表格样式 */
.transparent-table {

  ::v-deep {
    /* 完全重置所有CSS变量 */
    .el-table {
      --el-table-border-color: transparent !important;
      --el-table-border: none !important;
      --el-table-text-color: inherit !important;
      --el-table-header-text-color: inherit !important;
      --el-table-row-hover-bg-color: transparent !important;
      --el-table-current-row-bg-color: transparent !important;
      --el-table-header-bg-color: transparent !important;
      --el-table-fixed-box-shadow: none !important;
      --el-table-bg-color: transparent !important;
      --el-table-tr-bg-color: transparent !important;
      --el-table-expanded-cell-bg-color: transparent !important;
      --el-table-fixed-left-column: none !important;
      --el-table-fixed-right-column: none !important;
      background-color: transparent !important;
    }

    /* 1. 移除表格所有边框 */
    .el-table,
    .el-table__header-wrapper,
    .el-table__body-wrapper,
    .el-table__cell,
    .el-table__row,
    .el-table--border,
    .el-table--border th,
    .el-table--border td,
    .el-table__empty-block {
      border: none !important;
      border-right: none !important;
      border-bottom: none !important;
      border-collapse: separate !important;
      background-color: transparent !important;
    }

    /* 2. 移除表格默认背景色 */
    .el-table,
    .el-table th,
    .el-table tr,
    .el-table td {
      background-color: transparent !important;
    }

    /* 3. 表头样式定制 */
    .el-table__header {
      .el-table__cell {
        background-color: #0a4455 !important;
        color: rgba(255, 255, 255, 0.9) !important;
      }
    }

    /* 4. 表格行样式定制 */
    .el-table__body {
      tr {
        background-color: #0b2f36 !important;
        
        td {
          background-color: inherit !important;
          color: rgba(255, 255, 255, 0.9) !important;
        }

        &:nth-child(even) {
          background-color: #0a3c48 !important;
        }

        /* &:hover {
          background-color: #0a3c48 !important;
        } */
      }
    }

    /* 5. 移除默认的内边距影响 */
    .el-table__cell {
      padding: 6px 0 !important;
    }
  }
}
</style>